<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		<!-- <el-breadcrumb-item>
			<a href="/">课程管理</a>
		</el-breadcrumb-item> -->
		<el-breadcrumb-item>课程管理</el-breadcrumb-item>
		<el-breadcrumb-item>分类管理</el-breadcrumb-item>
	</el-breadcrumb>
	<el-divider />
	<!-- 行内表单 -->
	<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
		<el-form-item label="课程分类名称">
			<el-input v-model="queryInfo.sort" placeholder="请输入课程分类名称" clearable @clear="query"/>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="query">搜索</el-button>
			<el-button type="primary" @click="add">新增课程分类</el-button>
			<!-- <el-button type="danger" @click="batchRemove">批量删除</el-button> -->
		</el-form-item>
		
	</el-form>

	<!-- 数据表格 -->
	<el-table :data="dataList" style="width: 100%" @selection-change="handleSelectionChange" border>
		<el-table-column align="center" type="selection" width="50" />
			<el-table-column align="center"  label="ID" width="100" >
				<template #default="scope">
				      <!-- scope.$index 是当前行的索引（从 0 开始） -->
				      {{ scope.$index + 1 }}
				</template>
			</el-table-column>
		<el-table-column align="center" prop="sort" label="课程分类名称" />
		<el-table-column align="center" label="操作" width="200">
			<template #default="scope">
				<el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
				<!-- <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button> -->
			</template>
		</el-table-column>
	</el-table>


	<!-- 分页区域 -->
	<el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
		:page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
		@size-change="handleSizeChange" @current-change="handleCurrentChange" />

	<!-- 新增/编辑对话框 -->
		<el-dialog :title="title" v-model="dialogFormVisible" width="950" @close="cancle">
			<el-form :model="addOrUpdate" label-width="100">
				<el-form-item label="分类名称">
					<el-input v-model="addOrUpdate.sort" autocomplete="off" placeholder="请输入课程分类名称"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="cancle">取 消</el-button>
					<el-button type="primary" @click="confirm">确 定</el-button>
				</div>
			</template>
		</el-dialog>

</template>

<script setup>
	
	import {getCurrentInstance,reactive} from 'vue';
	import {ref,onMounted} from 'vue';
	import {ElMessage,ElMessageBox} from 'element-plus';
	import {Plus} from '@element-plus/icons-vue';
	import { cloneDeep } from 'lodash-es';
	//封装axios
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;


	//总查询记录数
	const total = ref(0);
	/* 查询信息对象 */
	const queryInfo = reactive({
		sort: '',
		pageNum: 1,
		pageSize: 10,
	})

	//当前页数据
	const dataList = ref([])

	//存储复选数据
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		multipleSelection.value = val.map(item => {
			return item.id
		})
		console.log(multipleSelection.value);
	}

	
		//查询数据的函数
		const query = () => {
			axios.get(`courseSort/page`, {
					params: queryInfo
				})
				.then((resp) => {
					if (resp.code === 200) {
						dataList.value = resp.data.list;
						total.value = resp.data.total;
					} else {
						ElMessage.error(resp.message)
					}
	
				})
		};



	//每页显示条目数改变
	const handleSizeChange = (val) => {
		queryInfo.pageSize = val;
		query();
	};
	//页码改变
	const handleCurrentChange = (val) => {
		queryInfo.pageNum = val;
		query();
	};
	
	const title = ref('新增课程分类')
	const dialogFormVisible = ref(false)
	//新增修改数据集
	const addOrUpdate = ref({
		id: '',
		sort: '',
	})
	
	//当点击关闭按钮 或 取消按钮的时候，重置表单
	const cancle = () => {
		console.log('你点击了取消按钮');
		addOrUpdate.value = {
			id: '',
			sort: '',
		}
		dialogFormVisible.value = false
	}
	
	//确定按钮
	const confirm = () => {
		console.log('你点击了确定按钮');
		if (addOrUpdate.value.id) { //数据存在id，修改
			axios.put('courseSort/update', addOrUpdate.value)
				.then((resp) => {
					if (resp.code == 200) {
						ElMessage.success(resp.message)
					} else {
						ElMessage.error(resp.message)
					}
					query();
					dialogFormVisible.value = false
				})
		} else { //新增
			axios.post('courseSort/add', addOrUpdate.value)
				.then((resp) => {
					if (resp.code == 200) {
						ElMessage.success(resp.message)
					} else {
						ElMessage.error(resp.message)
					}
					query();
					dialogFormVisible.value = false
				})
		}
	}
	
	//点击新增按钮的时候，弹出对话框
	const add = () => {
		title.value = '新增课程分类'
		dialogFormVisible.value = true
	}

	//编辑
	const edit = (row) => {
		title.value = '编辑课程分类'
		dialogFormVisible.value = true
		addOrUpdate.value = cloneDeep(row)
	}

	//单个删除
	const remove = (id) => {
		ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?','Warning', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			axios.delete(`courseSort/delete/${id}`)
				.then(resp => {
					if (resp.code == 200) {
						ElMessage.success(resp.message)
					} else {
						ElMessage.error(resp.message)
					}
					query();
					dialogFormVisible.value = false
				})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除',
			})
		})
	}
	//批量删除
	const batchRemove = () => {
		ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?','Warning', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			axios.delete('courseSort/delete', {
					params: {
						ids: multipleSelection.value.join(',')
					}
				})
				.then(resp => {
					if (resp.code == 200) {
						ElMessage.success(resp.message)
					} else {
						ElMessage.error(resp.message)
					}
					query();
				})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除',
			})
		})


	}

	//组件加载完毕，查询数据
	onMounted(() => {
		query();
	});
</script>

<style scoped>
	.el-breadcrumb {
			height: 20px;
			font-size: 15px;
			/* border-bottom: 1px solid #eee;
			padding-bottom: 15px; */
		}
	
		.demo-form-inline .el-input {
			--el-input-width: 220px;
		}
	
		.demo-form-inline .el-select {
			--el-select-width: 220px;
		}
	
		.el-pagination {
			margin-top: 15px;
		}
	
</style>